<template>
	<div class="chat-group-side">
		<div class="group-side-search">
			<el-input placeholder="搜索工作组成员" v-model="searchText">
				<i class="el-icon-search el-input__icon" slot="prefix"> </i>
			</el-input>
		</div>
		<el-scrollbar class="group-side-scrollbar">
			<div class="group-side-member-list">
				<div class="group-side-invite">
					<div class="invite-member-btn" title="邀请好友进工作组" @click="showAddGroupMember = true">
						<i class="el-icon-plus"></i>
					</div>
					<div class="invite-member-text">邀请</div>

				</div>
				<div v-for="(member, index) in memberList" :key="index">
					<group-member class="group-side-member" :member="member" :showDel="false"></group-member>
				</div>
			</div>
			<!-- {{ chatsList }} -->
			<el-divider content-position="center"></el-divider>
			<el-form labelPosition="top" class="group-side-form" :model="group">
				<el-form-item label="工作组名称">
					<el-input v-model="localChatsList.chatSessionName" :disabled="disabled" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="组长">
					<el-input :value="localChatsList.chatSessionMaster" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="工作组公告">
					<!-- disabled -->
					<el-input v-model="localChatsList.chatSessionNotice" type="textarea" :disabled="disabled" maxlength="1024"
						placeholder="组长未设置"></el-input>
				</el-form-item>
				<el-form-item label="是否置顶" prop="computedChatSessionIsTop" style="display: flex;align-items: center;">
					<el-switch v-model="localChatsList.isTop" :disabled="disabled" style="margin-left: 50px;"></el-switch>
				</el-form-item>
				<!-- <el-form-item label="备注">
					<el-input v-model="group.remarkGroupName" :disabled="!editing" :placeholder="group.name"
						maxlength="20"></el-input>
				</el-form-item> -->
				<!-- <el-form-item label="我在本群的昵称">
					<el-input v-model="group.remarkGroupName" :disabled="!editing" :placeholder="group.name"
						maxlength="20"></el-input> -->
				<!-- <el-input v-model="group.remarkNickName" :disabled="!editing" maxlength="20"
						:placeholder="$store.state.userStore.userInfo.nickName"></el-input> -->
				<!-- </el-form-item> -->
				<div class="btn-group">
					<el-button v-show="editing" type="success" @click="onSaveGroup()">提交</el-button>
					<el-button v-show="!editing" type="primary" @click="onChange()">编辑</el-button>
					<el-button type="danger" v-show="!isOwner" @click="onQuit()">退出工作组</el-button>
				</div>
			</el-form>
		</el-scrollbar>

	</div>
</template>

<script>
// import AddGroupMember from '../group/AddGroupMember.vue';
import GroupMember from '../group/GroupMember.vue';

export default {
	name: "chatGroupSide",
	components: {
		// AddGroupMember,
		GroupMember
	},
	data () {
		return {
			localChatsList: { // 用于保存从父组件传入的 chatsList
				chatSessionName: this.chatsList.chatSessionName,
				chatSessionMaster: this.chatsList.chatSessionMaster,
				chatSessionNotice: this.chatsList.chatSessionNotice,
				isTop: this.chatsList.isTop
			},
			searchText: '',
			group: {
				id: 1,
				name: 'Vue开发者群',
				notice: '欢迎加入工作组，请遵守群规！',
				remarkGroupName: '',
				remarkNickName: '',
				quit: false
			},

			ownerName: '群主小李',
			editing: false,
			disabled: true,
			showAddGroupMember: false,
			isOwner: false // 是否是群主
		}
	},
	props: {
		chatsList: { type: Object },
		memberList: { type: Array }
	},
	methods: {
		onChange () {
			this.editing = !this.editing
			this.disabled = !this.disabled
		},
		onClose () {
			this.$emit('close');
		},
		async onSaveGroup () {
			// 打印修改后的数据
			const token = sessionStorage.getItem('token')
			const updatedSessionData = {
				chatSessionId: this.chatsList.chatSessionId,
				chatSessionName: this.localChatsList.chatSessionName,
				chatSessionNotice: this.localChatsList.chatSessionNotice,
				chatSessionMaster: this.localChatsList.chatSessionMaster,
				isTop: this.localChatsList.isTop
			};

			try {
				// 调用 Vuex 的 action 来更新聊天会话
				const updatedChatSession = await this.$store.dispatch('updateChatSession', { token, updatedSessionData });

				// 在这里可以根据需要做其他操作，如通知用户更新成功
				console.log('更新成功:', updatedChatSession);
				this.$message.success('恭喜你，工作组会话修改成功');
				this.onChange()
			} catch (error) {
				// 处理失败逻辑
				console.error('更新失败:', error);
				this.$message.error('修改失败');
			}
		},
		onQuit () {
			this.$confirm('退出工作组后将不再接受群里的消息，确认退出吗？', '确认退出?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {

			})
		},

	},
	watch: {
		// 当父组件的 chatsList 发生变化时，更新本地的数据
		chatsList: {
			handler (newVal) {
				this.localChatsList = { ...newVal };
			},
			deep: true, // 深度监听
			immediate: true, // 初始化时就触发
		},
	},
}
</script>

<style lang="scss">
.chat-group-side {
	position: relative;

	.group-side-member-list {
		padding: 10px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 16px;
		text-align: center;

		.group-side-member,
		.group-side-invite {
			margin: 0 7px;
		}

		.group-side-invite {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 50px;
			// margin-left: 5px;

			.invite-member-btn {
				width: 48px;
				height: 48px;
				line-height: 48px;
				border: #cccccc solid 1px;
				font-size: 18px;
				cursor: pointer;
				box-sizing: border-box;

				&:hover {
					border: #aaaaaa solid 1px;
				}
			}

			.invite-member-text {
				font-size: 14px;
				text-align: center;
				width: 100%;
				height: 30px;
				line-height: 30px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden
			}
		}
	}

	.group-side-form {
		text-align: left;
		padding: 10px;
		height: 30%;

		.el-form-item {
			margin-bottom: 12px;

			.el-form-item__label {
				padding: 0;
				line-height: 30px;
			}

			.el-textarea__inner {
				min-height: 100px !important;
			}
		}

		.btn-group {
			display: flex;
			justify-content: space-around;
			margin-top: 20px;
		}
	}

}
</style>
